<!DOCTYPE html>
<html>
<head>
    <title>数据图表</title>
    <#include "../../include/head-file.ftl">
</head>
<body>
<div id="index" class="ms-index" v-cloak>
    <div class="ms-search" style="padding-top:20px;">
        <el-row>
            <el-form :model="form"  ref="searchForm"  label-width="120px" size="mini" v-if="!isDetails">
                <el-row>
                    <el-col :span="8">
                        <el-form-item  label="数据表名" prop="tableName">
                            <el-input v-model="form.tableName"
                                      :disabled="false"
                                      :style="{width:  '100%'}"
                                      :clearable="true"
                                      placeholder="请输入数据表名">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" style="text-align: right;padding-right: 10px;" v-if="!isDetails">
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="form.sqlWhere=null;currentPage=1;list()">查询</el-button>
                        <el-button @click="rest"  icon="el-icon-refresh" size="mini">重置</el-button>
                     </el-col>
                </el-row>
            </el-form>
            <el-col style="text-align: end;margin-bottom: 10px;">
                <el-button @click="back" icon="iconfont icon-fanhui" size="mini" v-if="isDetails" >返回</el-button>
            </el-col>
        </el-row>
    </div>
    <el-main class="ms-container" v-if="!isDetails">
        <el-table ref="multipleTable"
                  height="calc(100vh - 20px)"
                  border :data="dataList"
                  row-key="id"
                  key="one"
                  v-loading="loading"
                  tooltip-effect="dark">
            <template slot="empty">{{emptyText}}</template>
            <el-table-column label="数据表名"  align="center" prop="tableComment" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="资源提供方" align="center"  prop="tableProvider">
            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <@shiro.hasPermission name="cms:map:view">
                        <el-link type="primary" :underline="false" @click="view(scope.row.tableName)" >查看</el-link>
                    </@shiro.hasPermission>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                :page-sizes="[10,20,30,40,50,100]"
                layout="total, sizes, prev, pager, next, jumper"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="total"
                class="ms-pagination"
                @current-change='currentChange'
                @size-change="sizeChange">
        </el-pagination>
    </el-main>
    <el-main class="ms-container" v-if="isDetails">
        <el-table ref="multipleTable1"
                  height="calc(100vh - 20px)"
                  border :data="dataList1"
                  row-key="id"
                  key="two"
                  v-loading="loading"
                  tooltip-effect="dark">
            <template slot="empty">{{emptyText}}</template>
            <el-table-column v-for='item in headers' :label="item.name"  align="center" :prop="item.field"></el-table-column>
        </el-table>
        <el-pagination
                background
                :page-sizes="[10,20,30,40,50,100]"
                layout="total, sizes, prev, pager, next, jumper"
                :current-page="currentPage1"
                :page-size="pageSize1"
                :total="total1"
                class="ms-pagination"
                @current-change='currentChange1'
                @size-change="sizeChange1">
        </el-pagination>
    </el-main>
</div>
</body>
</html>
<script>
    "use strict";
    var indexVue = new Vue({
        el: '#index',
        data: {
            //分类列表
            dataList: [],
            //列表选中
            selectionList: [],
            //列表选中
            total: 0,
            //总记录数量
            pageSize: 10,
            //页面数量
            currentPage: 1,
            //加载状态
            loading: true,
            //提示文字
            emptyText: '',
            manager: ms.manager,
            loadState: false,
            //搜索表单
            form: {
                sqlWhere: null,
                tableName:''
            },
            isDetails : false,
            //分类列表
            dataList1: [],
            headers:[],
            total1: 0,
            //总记录数量
            pageSize1: 10,
            //页面数量
            currentPage1: 1,
        },
        methods: {
            //查询列表
            list: function () {
                var that = this;
                this.loadState = false;
                this.loading = true;
                var page = {
                    pageNo: that.currentPage,
                    pageSize: that.pageSize
                };
                // var form = JSON.parse(JSON.stringify(that.form));
                // for (var key in form) {
                //     if (!form[key]) {
                //         delete form[key];
                //     }
                // }
                var form = that.form
                history.replaceState({
                    form: form,
                    page: page
                }, "");
                ms.http.post(ms.manager + "/cms/statistic/data-map/tables.do", form.sqlWhere ? Object.assign({}, {
                    sqlWhere: form.sqlWhere
                }, page): Object.assign({}, form, page),{
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(function (res) {
                    if (that.loadState) {
                        that.loading = false;
                    } else {
                        that.loadState = true;
                    }

                    if (!res.result || res.data.total <= 0) {
                        that.emptyText = '暂无数据';
                        that.dataList = [];
                        that.total = 0;
                    } else {
                        that.emptyText = '';
                        that.total = res.data.total;
                        that.dataList = res.data.records;
                    }
                });
                setTimeout(function () {
                    if (that.loadState) {
                        that.loading = false;
                    } else {
                        that.loadState = true;
                    }
                }, 500);
            },
            //pageSize改变时会触发
            sizeChange: function (pagesize) {
                this.loading = true;
                this.pageSize = pagesize;
                this.list();
            },
            //currentPage改变时会触发
            currentChange: function (currentPage) {
                this.loading = true;
                this.currentPage = currentPage;
                this.list();
            },
            //重置表单
            rest: function () {
                this.currentPage = 1;
                this.$refs.searchForm.resetFields();
                this.list();
            },
            view:function(tableName){
                this.isDetails = true;
                this.dataList1 = [];
                this.currentPage1 = 1;
                this.list1(tableName);
            },
            //查询列表
            list1: function (tableName) {
                this.form.tableName = tableName;
                var that = this;
                this.loadState = false;
                this.loading = true;
                var page = {
                    pageNo: that.currentPage1,
                    pageSize: that.pageSize1
                };
                var form = {tableName:tableName};
                ms.http.post(ms.manager + "/cms/statistic/data-map/data.do", Object.assign({},form, page),{
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(function (res) {
                    if (that.loadState) {
                        that.loading = false;
                    } else {
                        that.loadState = true;
                    }

                    console.log("res", res)
                    if (!res.result || res.data.page.total <= 0) {
                        that.emptyText = '暂无数据';
                        that.dataList1 = [];
                        that.total1 = 0;
                    } else {
                        that.emptyText = '';
                        that.headers = res.data.headers; //[{name:'日期',field:'date'},{name:'姓名',field:'name'},{name:'证件类型',field:'idCardType'}]
                        that.total1 = res.data.page.total;
                        that.dataList1 = res.data.page.records;//[{date:'2022-02-18',name:'张三',idCardType:'身份证'}]//
                    }
                });
                setTimeout(function () {
                    if (that.loadState) {
                        that.loading = false;
                    } else {
                        that.loadState = true;
                    }
                }, 500);
            },
            //pageSize改变时会触发
            sizeChange1: function (pagesize) {
                this.loading = true;
                this.pageSize1 = pagesize;
                this.list1(this.form.tableName);
            },
            //currentPage改变时会触发
            currentChange1: function (currentPage) {
                this.loading = true;
                this.currentPage1 = currentPage;
                this.list1(this.form.tableName);
            },
            back:function () {
                this.isDetails = false;
                this.loading = false;
            }
        },
        created: function () {
            if (history.hasOwnProperty("state")) {
                this.form = history.state.form;
                this.currentPage = history.state.page.pageNo;
                this.pageSize = history.state.page.pageSize;
            }
            this.list();
        }
    });
</script>
<style>
    #main .ms-search {
        padding: 20px 0 0;
    }
    #main .ms-container {
        height: calc(100vh - 141px);
    }
    body{
        overflow: hidden;
    }
    /*饿了么滚动样式*/
    .el-scrollbar__wrap{
        overflow-x: scroll !important;
    }
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 14px;
    }

</style>